<template>
    <div class="mod-prod-sku-table">
        <el-form-item>
            <el-table
                    :data="value"
                    :span-method="tableSpanMethod"
                    border
                    style="width: 100%; margin-top: 20px">
                <el-table-column :key="index" :label="leftTitle" v-for="(leftTitle, index) in tableLeftTitles">
                    <template slot-scope="scope">
                        {{scope.row.properties.split(';')[index].split(':')[1]}}
                    </template>
                </el-table-column>
                <el-table-column label="sku图片"
                                 prop="pic"
                                 v-if="tableLeftTitles.length"
                                 width="180">
                    <template slot-scope="scope">
                        <pic-upload v-model="scope.row.pic">
                        </pic-upload>
                    </template>
                </el-table-column>
                <el-table-column
                        label="商品名称"
                        prop="prodName"
                        v-if="tableLeftTitles.length" width="250">
                    <template slot-scope="scope">
                        <el-input :disabled="!scope.row.status" type="textarea" v-model="scope.row.prodName"></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                        label="销售价"
                        prop="price"
                        width="160">
                    <template slot-scope="scope">
                        <el-input-number
                                :disabled="!scope.row.status"
                                :max="1000000000"
                                :min="0.01"
                                :precision="2"
                                controls-position="right"
                                size="small"
                                v-model="scope.row.price">
                        </el-input-number>
                    </template>
                </el-table-column>
                <el-table-column
                        label="市场价"
                        prop="oriPrice"
                        width="160">
                    <template slot-scope="scope">
                        <el-input-number
                                :disabled="!scope.row.status"
                                :max="1000000000"
                                :min="0.01"
                                :precision="2"
                                controls-position="right"
                                size="small"
                                v-model="scope.row.oriPrice">
                        </el-input-number>
                    </template>
                </el-table-column>
                <el-table-column
                        label="库存"
                        prop="stocks"
                        width="160">
                    <template slot-scope="scope">
                        <el-input-number :disabled="!scope.row.status" :min="0" controls-position="right" size="small"
                                         type="number" v-model="scope.row.stocks"></el-input-number>
                    </template>
                </el-table-column>
                <el-table-column
                        label="商品重量(kg)"
                        prop="weight"
                        width="210">
                    <template slot-scope="scope">
                        <el-input-number :disabled="!scope.row.status" :min="0" :precision="2" controls-position="right"
                                         v-model="scope.row.weight"></el-input-number>
                    </template>
                </el-table-column>
                <el-table-column
                        label="商品体积(m³)"
                        prop="volume"
                        width="210">
                    <template slot-scope="scope">
                        <el-input-number :disabled="!scope.row.status" :min="0" :precision="2" controls-position="right"
                                         v-model="scope.row.volume"></el-input-number>
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作">
                    <template slot-scope="scope">
                        <el-button @click="changeSkuStatus(`${scope.$index}`)" size="small" type="text"
                                   v-if="scope.row.status">禁用
                        </el-button>
                        <el-button @click="changeSkuStatus(`${scope.$index}`)" size="small" type="text" v-else>启用
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-form-item>
    </div>
</template>

<script>
    import PicUpload from '@/components/pic-upload'

    export default {
        data() {
            return {
                // 数据库中的规格
                dbSpecs: [],
                // 根据选定的规格所查询出来的规格值
                dbSpecValues: [],
                specs: [], // 使用的规格
                initing: false
            }
        },
        components: {
            PicUpload
        },
        props: {
            value: {
                default: [],
                type: Array
            },
            prodName: {
                default: ''
            }
        },
        watch: {
            prodName: function () {
                this.skuAddProdName()
            }
        },
        // activated: function () {
        //   this.$emit('input', [Object.assign({}, this.defalutSku)])
        // },
        created: function () {
            this.$http({
                url: this.$http.adornUrl(`/prod/spec/list`),
                method: 'get',
                params: this.$http.adornParams()
            }).then(({data}) => {
                this.dbSpecs = data
            })
        },
        computed: {
            tableLeftTitles() {
                let res = []
                for (let i = 0; i < this.skuTags.length; i++) {
                    const skuTag = this.skuTags[i]
                    res.push(skuTag.tagName)
                }
                return res
            },
            skuTags: {
                get() {
                    return this.$store.state.prod.skuTags
                }
            },
            defalutSku() {
                return this.$store.state.prod.defalutSku
            }
        },
        methods: {
            init() {
                this.initing = true
            },
            getTableSpecData() {
                return this.value
            },
            tableSpanMethod({row, column, rowIndex, columnIndex}) {

            },
            changeSkuStatus(tagIndex) {
                this.value[tagIndex].status = this.value[tagIndex].status ? 0 : 1
            },
            skuAddProdName() {
                if (this.initing) {
                    return
                }
                let skuList = []
                for (let i = 0; i < this.value.length; i++) {
                    const sku = Object.assign({}, this.value[i])
                    if (!sku.properties) {
                        return
                    }
                    sku.skuName = ''
                    let properties = sku.properties.split(';')
                    for (const propertiesKey in properties) {
                        sku.skuName += properties[propertiesKey].split(':')[1] + ' '
                    }
                    sku.prodName = this.prodName + ' ' + sku.skuName
                    skuList.push(sku)
                }
                this.$emit('input', skuList)
            }
        }
    }
</script>

<style lang="scss">

    .mod-prod-sku-table {
        .pic-uploader-component .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;

            .pic-uploader-icon {
                font-size: 28px;
                color: #8c939d;
                width: 120px;
                height: 120px;
                line-height: 120px;
                text-align: center;
            }

            .pic {
                width: 120px;
                height: 120px;
                display: block;
            }
        }

        .pic-uploader-component .el-upload:hover {
            border-color: #409EFF;
        }
    }
</style>
